<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>考勤表</title>
    <!--layui引用-->
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<div class="layui-form-item">
    <div class="demoTable">
        <div class="layui-inline">
            <label class="layui-form-label">学号</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input class="layui-input" name="id" id="demoReload" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input class="layui-input" name="name" id="demoName" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <form class="layui-form" action="">
                <label class="layui-form-label">考勤情况</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="hidden" class="layui-input demoState" lay-verify="demoState" id="demoState">
                    <select name="filter" lay-filter="filter">
                        <option value=""></option>
                        <option value="正常">正常</option>
                        <option value="迟到">迟到</option>
                        <option value="早退">早退</option>
                        <option value="请假">请假</option>
                        <option value="旷课">旷课</option>
                    </select>
                </div>
            </form>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">考勤日期</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="demoDate" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn" data-type="reload">
                <i class="layui-icon">&#xe615;</i>搜索
            </button>
        </div>
        <div class="layui-inline">
            <a class="layui-btn layui-btn-normal addNews_btn">
                <i class="layui-icon">&#xe654;</i>考勤</a>
        </div>
        <div class="layui-inline">
            <a class="layui-btn layui-btn-danger layui-btn-normal delAll_btn">
                <i class="layui-icon">&#xe640;</i>删除</a>
        </div>
        <div class="layui-inline">
            <a class="layui-btn layui-bg-cyan layui-btn-normal renovate">
                <i class="layui-icon">&#xe666;</i>刷新</a>
        </div>
        <div class="layui-inline">
            <a class="layui-btn layui-bg-orange layui-btn-normal count">
                <i class="layui-icon">&#xe629;</i>统计</a>
        </div>
    </div>
</div>
<!--</form>-->
<!--表格-->
<table class="layui-hide" id="test" lay-filter="test"></table>
<script>
    layui.use(['form', 'table', 'laydate'], function () {
        var table = layui.table,
            laydate = layui.laydate,
            form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer;

        //日期范围
        laydate.render({
            elem: '#demoDate'
            , range: true
        });

        //展示已知数据
        var tableIns = table.render({
            elem: '#test'
            , cellMinWidth: 80
            , url: '/atb/TimeSheets.do'
            , page: true
            , limit: 12 //每页默认显示的数量
            , cols: [[ //标题栏
                {checkbox: true, fixed: true}
                , {field: 'no', title: '学号'}
                , {field: 'name', title: '姓名'}
                , {field: 'time', title: '入学时间'}
                , {field: 'state', title: '考勤情况'}
                , {field: 'note', title: '备注'}
                , {field: 'date', title: '考勤日期', sort: true}
            ]]
            , even: true
            , id: 'testReload'
        });

        //搜索
        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');
                var demoName = $('#demoName');
                var demoState = $('#demoState');
                var demoDate = $('#demoDate');
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        key: {
                            //搜索学号参数no[no]
                            no: demoReload.val(),
                            name: demoName.val(),
                            state: demoState.val(),
                            date: demoDate.val()
                        }
                    }
                });
            }
        };
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        // 监听表格中下拉栏
        form.on('select(filter)', function (data) {
            $('.demoState').val(data.value);
            // console.log(data.value); //得到被选中的值
        });

        // 添加考勤
        $(".addNews_btn").click(function () {
            var index = layui.layer.open({
                title: "添加考勤",
                type: 2,
                content: "newsAdd.html",
                success: function () {
                    setTimeout(function () {
                        layui.layer.tips('点击此处返回文章列表', '.layui-layer-setwin .layui-layer-close', {
                            tips: 3
                        });
                    }, 500)
                }
            });
            layui.layer.full(index);
            //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
            $(window).on("resize", function () {
                layui.layer.full(index);
            })
        });

        // 批量删除
        $(".delAll_btn").click(function () {
            var checkStatus = table.checkStatus('testReload'),
                data = checkStatus.data,
                id = [];
            if (data.length > 0) {
                //prompt层
                layer.prompt({title: '输入口令密码，并确认', formType: 1}, function (pass, index) {
                    layer.close(index);
                    if (pass == 123) {
                        for (var i in data) {
                            id.push(data[i].id);
                        }
                        layer.confirm('确定删除选中的文章？', {icon: 3, title: '提示信息'}, function (index) {
                            $.get('/atb/delete.do', {
                                id: id  //将需要删除的Id作为参数传入
                            }, function (data) {
                                data = eval("(" + data + ")");
                                var rlt = data['rlt'];
                                if (rlt !== 1) {
                                    layer.msg('删除失败');
                                } else {
                                    layer.msg('删除成功！');
                                }
                                tableIns.reload();
                                layer.close(index);
                            })
                        })
                    } else {
                        layer.msg('口令错误呦~');
                    }
                });
            } else {
                layer.msg("请选择需要删除的文章");
            }
        });

        // 刷新文章
        $(".renovate").click(function () {
            tableIns.reload();
        });

        // 统计分析
        $(".count").click(function () {
            var index = layui.layer.open({
                title: "统计分析",
                type: 2,
                content: "count.html",
                success: function () {
                    setTimeout(function () {
                        layui.layer.tips('点击此处返回文章列表', '.layui-layer-setwin .layui-layer-close', {
                            tips: 3
                        });
                    }, 500)
                }
            });
            layui.layer.full(index);
            // //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
            // $(window).on("resize", function () {
            //     layui.layer.full(index);
            // })
        });

    });
</script>
</body>
</html>